<template>
  <div class="select_date_wrap">
    <!-- Selected year -->
    <section id="selectYear" v-if="date.selectType === 1">
      <div class="date_wrap" :class="{'fadeIn': isDateShow, 'fadeOut': !isDateShow && hasDateTrans, 'hide': !isDateShow && !hasDateTrans}">
        <span class="cancel" @click="close">Cancel</span>
        <span class="sure" @click="sureSelect">Sure</span>
        <div class="select_wrap">
          <!-- year -->
          <div class="year_wrap">
            <ul>
              <li class="year" v-for="(item, index) in yearArr" :key="index" :class="{'active': index === activeYear}" @click="activeYear = index">{{`${item}${date.showAllText ? 'year' : ''}`}}</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
    <!-- Choose year and month -->
    <section id="selectMonth" v-if="date.selectType === 2">
      <div class="date_wrap" :class="{'fadeIn': isDateShow, 'fadeOut': !isDateShow && hasDateTrans, 'hide': !isDateShow && !hasDateTrans}">
        <span class="cancel" @click="close">cancel</span>
        <span class="sure" @click="sureSelect">Sure</span>
        <div class="select_wrap">
          <!-- year -->
          <div class="year_wrap">
            <ul>
              <li class="year" v-for="(item, index) in yearArr" :key="index" :class="{'active': index === activeYear}" @click="activeYear = index">{{item}}</li>
            </ul>
          </div>
          <!-- month -->
          <div class="month_wrap">
            <ul>
              <li class="month" v-for="(item, index) in monthArr" :key="index" :class="{'active': index === activeMonth}" @click="activeMonth = index">{{item}}</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
    <!-- Choose days and months -->
    <section id="selectDay" v-if="date.selectType === 3">
      <!-- Select Start Date -->
      <div class="date_wrap" :class="{'fadeIn': isDateShow, 'fadeOut': !isDateShow && hasDateTrans, 'hide': !isDateShow && !hasDateTrans}" v-if="date.intervalTimeType === 'start'">
        <span class="cancel" @click="close">cancel</span>
        <span class="sure" @click="sureSelect">Sure</span>
        <div class="select_wrap">
          <!-- year -->
          <div class="year_wrap">
            <ul>
              <li class="year" v-for="(item, index) in yearArr" :key="index" :class="{'active': index === activeYear}" @click="activeYear = index">{{`${item}${date.showAllText ? 'year' : ''}`}}</li>
            </ul>
          </div>
          <!-- month -->
          <div class="month_wrap">
            <ul>
              <li class="month" v-for="(item, index) in monthArr" :key="index" :class="{'active': index === activeMonth}" @click="activeMonth = index">{{`${item}${date.showAllText ? 'month' : ''}`}}</li>
            </ul>
          </div>
          <!-- day -->
          <div class="day_wrap">
            <ul>
              <li class="day" v-for="(item, index) in dayArr" :key="index" :class="{'active': index === activeDay}" @click="activeDay = index">{{`${item}${date.showAllText ? 'day' : ''}`}}</li>
            </ul>
          </div>
        </div>
      </div>
      <!-- Select end date -->
      <div class="date_wrap" :class="{'fadeIn': isDateShow, 'fadeOut': !isDateShow && hasDateTrans, 'hide': !isDateShow && !hasDateTrans}" v-if="date.intervalTimeType === 'end'">
        <span class="cancel" @click="close">cancel</span>
        <span class="sure" @click="sureSelect">Sure</span>
        <div class="select_wrap">
          <!-- year -->
          <div class="year_wrap">
            <ul>
              <li class="year" v-for="(item, index) in yearArr" :key="index" :class="{'active': index === activeYear, 'can_not_select': item < date.selectResult[0][0]}" @click="selectEndYear(index)">{{`${item}${date.showAllText ? 'year' : ''}`}}</li>
            </ul>
          </div>
          <!-- month -->
          <div class="month_wrap">
            <ul>
              <li class="month" v-for="(item, index) in monthArr" :key="index" :class="{'active': index === activeMonth, 'can_not_select': yearArr[activeYear] === date.selectResult[0][0] && item < date.selectResult[0][1]}" @click="selectEndMonth(index)">{{`${item}${date.showAllText ? 'month' : ''}`}}</li>
            </ul>
          </div>
          <!-- day -->
          <div class="day_wrap">
            <ul>
              <li class="day" v-for="(item, index) in dayArr" :key="index" :class="{'active': index === activeDay, 'can_not_select': (yearArr[activeYear] === date.selectResult[0][0] && monthArr[activeMonth] === date.selectResult[0][1] && item <= date.selectResult[0][2] && !date.canRepeat) || (yearArr[activeYear] === date.selectResult[0][0] && monthArr[activeMonth] === date.selectResult[0][1] && item < date.selectResult[0][2] && date.canRepeat)}" @click="selectEndDay(index)">{{`${item}${date.showAllText ? 'day' : ''}`}}</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: 'selectDate',
  data () {
    return {
      activeYear: 0, // Subscript for current selected year
      activeMonth: new Date().getMonth(), // Subscript for currently selected month
      activeDay: 0, // Currently selected subscript
      month: {
      }
    };
  },
  beforeMount () {
  },
  computed: {
    ...mapState([
      'date',
      'hasDateTrans',
      'isDateShow'
    ]),
    hasDateTrans () {
      return this.$store.state.hasDateTrans;
    },
    yearArr () {
      let arr = [];
      for (let i = parseFloat(this.$store.state.date.default[0][0]); i <= parseFloat(this.$store.state.date.default[1][0]); i++) {
        arr.push(i);
      }
      return arr;
    },
    monthArr () {
      if (this.activeYear === 0 && this.yearArr.length !== 1) {
        let arr = [];
        for (let i = parseFloat(this.$store.state.date.default[0][1]); i <= 12; i++) {
          if (this.date.showDoubleNum) {
            if (i < 10) {
              arr.push(`0${i}`);
            } else {
              arr.push(i);
            }
          } else {
            arr.push(i);
          }
        }
        return arr;
      } else if (this.activeYear === this.yearArr.length - 1) {
        let arr = [];
        for (let i = 1; i <= parseFloat(this.$store.state.date.default[1][1]); i++) {
          if (this.date.showDoubleNum) {
            if (i < 10) {
              arr.push(`0${i}`);
            } else {
              arr.push(i);
            }
          } else {
            arr.push(i);
          }
        }
        return arr;
      } else {
        if (this.date.showDoubleNum) {
          return ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
        } else {
          return [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
        }
      }
    },
    dayArr () {
      let arr = [];
      let max;
      // February
      if (this.monthArr[this.activeMonth] === 2) {
        // Leap year
        if (this.yearArr[this.activeYear] % 4 === 0) {
          max = 28;
        } else {
          max = 29;
        }
      } else if ([0, 2, 4, 6, 7, 9, 11].includes(this.activeMonth)) {
        max = 31;
      } else {
        max = 30;
      }
      for (let i = 1; i <= max; i++) {
        if (this.date.showDoubleNum) {
          if (i < 10) {
            arr.push(`0${i}`);
          } else {
            arr.push(i);
          }
        } else {
          arr.push(i);
        }
      }
      return arr;
    }
  },
  methods: {
    // Year of selection end date
    selectEndYear (index) {
      if (this.yearArr[index] < this.date.selectResult[0][0]) {
        return false;
      }
      this.activeYear = index;
    },
    // Month of end date selection
    selectEndMonth (index) {
      if (this.yearArr[this.activeYear] === this.date.selectResult[0][0] && this.monthArr[index] < this.date.selectResult[0][1]) {
        return false;
      }
      this.activeMonth = index;
    },
    // Days to select end date
    selectEndDay (index) {
      // Is it possible to choose the same day?
      if ((this.yearArr[this.activeYear] === this.date.selectResult[0][0] && this.monthArr[this.activeMonth] === this.date.selectResult[0][1] && this.dayArr[index] <= this.date.selectResult[0][2] && !this.date.canRepeat) || (this.yearArr[this.activeYear] === this.date.selectResult[0][0] && this.monthArr[this.activeMonth] === this.date.selectResult[0][1] && this.dayArr[index] < this.date.selectResult[0][2] && this.date.canRepeat)) {
        return false;
      }
      this.activeDay = index;
    },
    close () {
      this.$store.commit('hideDateWrap');
    },
    sureSelect () {
      let result = [];
      let str = [];
      result.push(this.activeYear);
      str.push(this.yearArr[this.activeYear]);
      if (this.date.selectType !== 1) {
        result.push(this.activeMonth);
        str.push(this.monthArr[this.activeMonth]);
      }
      if (this.date.selectType === 3) {
        result.push(this.activeDay);
        str.push(this.dayArr[this.activeDay]);
      }
      // It is outdated.
      if (this.date.selectType === 3) {
        // If you choose the starting date
        if (this.date.intervalTimeType === 'start') {
          // If the end date has been selected and the start date is after the end date, the end date is reset.
          if (this.date.selectResult[1] && str[0] >= this.date.selectResult[1][0] && str[1] >= parseFloat(this.date.selectResult[1][1]) && str[2] > parseFloat(this.date.selectResult[1][2])) {
            this.$store.commit('sureDate', [str]);
          } else if (this.date.selectResult[1]) {
            // If the starting date of the selection is legal
            this.date.selectResult.splice(0, 1, str);
            this.$store.commit('sureDate', this.date.selectResult);
          } else {
            this.$store.commit('sureDate', [str]);
          }
        } else {
          // If you choose the end date
          let newStr = this.date.selectResult;
          newStr.push(str);
          this.$store.commit('sureDate', newStr);
        }
      } else {
        this.$store.commit('sureDate', str);
      }
      this.close();
    },
    chooseMonth (type, index) {
      this.activeMonth.splice(type, 1, index);
    }
  }
};
</script>

<style lang="scss" scoped>
  @import '../style/mixin.scss';
  // height
  $height: 40vh;
  $h: calc(20vh - 28px);
  // Main color
  $first: #ff9e27;
  // Color matching
  $second: #E86806;
  .select_date_wrap {
    font-size: 26px;
    color: #999;
    // Selection date
    #selectYear, #selectMonth, #selectDay{
      .date_wrap{
        width: 100%;
        position: absolute;
        height: 100%;
        background-color: rgba(0,0,0,.4);
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        z-index: 91;
        animation-duration: .85s;
        &.hide{
          display: none;
        }
        &.fadeOut{
          left: 200%;
          top: 0;
          transition: left .1s .9s;
        }
        >span{
          width: 50%;
          position: absolute;
          bottom: $height;
          text-align: center;
          height: 80px;
          line-height: 80px;
          background-color: #fff;
          border-bottom: 1px solid #eee;
          font-size: 36px;
          &.cancel{
            left: 0;
            color: $second;
          }
          &.sure{
            color: $first;
            left: 50%;
          }
        }
        .select_wrap{
          height: $height;
          position: absolute;
          background-color: #fff;
          bottom: 0;
          left: 0;
          width: 100%;
          display: flex;
          justify-content: space-between;
          // &::before{
          //   content: '';
          //   display: block;
          //   position: absolute;
          //   top: 50%;
          //   left: 0;
          //   z-index: 6;
          //   width: 100%;
          //   height: 1px;
          //   background-color: #ddd;
          //   transform: translateY(-28px);
          // }
          // &::after{
          //   content: '';
          //   display: block;
          //   position: absolute;
          //   top: 50%;
          //   left: 0;
          //   z-index: 6;
          //   width: 100%;
          //   height: 1px;
          //   background-color: #ddd;
          //   transform: translateY(28px);
          // }
          // year_wrap/month_wrap/day_wrap
          >div{
            flex: 1;
            height: $height;
            overflow-y: scroll;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
            // position: relative;
            &:not(:last-child){
              border-right: 1px solid #eee;
            }
            // &::before{
            //   content: '';
            //   display: block;
            //   height: $h;
            //   background: linear-gradient(180deg, #fff, transparent);
            //   position: absolute;
            //   left: 0;
            //   top: 0;
            //   width: 100%;
            //   z-index: 3;
            // }
            // &::after{
            //   content: '';
            //   display: block;
            //   position: absolute;
            //   right: 0;
            //   bottom: 0;
            //   width: 100%;
            //   height: $h;
            //   background: linear-gradient(180deg, transparent, #fff);
            // }
            // &.year_wrap::before, &.year_wrap::after{
            //   z-index: 1;
            // }
            // &.month_wrap::before, &.month_wrap::after{
            //   z-index: 1;
            // }
            // &.day_wrap::before, &.day_wrap::after{
            //   z-index: 1;
            // }
            >ul{
              display: flex;
              flex-direction: column;
              justify-content: center;
              // margin: $h 0;
              position: relative;
              &::before{
                content: '';
                display: block;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                width: 1px;
                background-color: transparent;
              }
              &::after{
                content: '';
                display: block;
                height: 100%;
                position: absolute;
                right: 0;
                top: 0;
                width: 1px;
                background-color: transparent;
              }
            }
            .year, .month, .day{
              text-align: center;
              height: 66px;
              line-height: 66px;
              font-size: 32px;
              background-color: #fff;
              &:not(:last-child){
                border-bottom: 1px solid #eee;
              }
              &.active{
                color: $first;
                box-shadow: inset 0 0 4px $first;
                border-top: 1px solid #eee;
                border-bottom: 1px solid #eee;
              }
              &.can_not_select{
                color: #999;
                box-shadow: none;
              }
            }
          }
        }
      }
    }
  }
</style>
